<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="../common/base_body_header.jsp" %>
<%@include file="../common/navbar.jsp" %>
<%@include file="../common/page_content_pre.jsp" %>

<div class="page-content">
    <div class="row">
        <shiro:hasPermission name="phone:apply">
            <div class="col-sm-12">
                <button id="apply" class="btn btn-xs btn-success" type="button"
                        data-toggle="modal" data-target="#exampleModal"
                        data-whatever="@mdo">申请查看业主电话
                    <i class="icon-plus align-top bigger-125 icon-on-right"></i>
                </button>
                <button id="telPhone" style="display: none;" class="btn btn-xs btn-success" type="button">
                    业主电话：${tel}</button>
            </div>
        </shiro:hasPermission>
        <div class="col-xs-12">
            <div class="table-responsive">
                <table id="list-table" class="table table-striped table-bordered table-hover" width="100%">
                    <thead>
                    <tr>
                        <th class="hidden-480">ID</th>
                        <th class="hidden-480">查看日期</th>
                        <th class="hidden-480">查看人员</th>
                        <th class="hidden-480">查看备注</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
        <input id="id" type="hidden" value="${phone.houseId}">
        <input id="tel" type="hidden" value="${tel}">
    </div>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="exampleModalLabel">申请单</h4>
                </div>
                <div class="modal-body">
                    <div class="input-group">
                        <span class="input-group-addon">申请备注:</span>
                        <textarea type="text" class="form-control col-sm-9" cols="3" id="remark"
                                  style="height: 150px;"></textarea>
                    </div>
                    <span style="float: right; color: red;" id="infoId"></span>
                    <div>&nbsp;</div>
                </div>
                <div class="modal-footer" style="">
                    <button type="button" class="btn btn-sm btn-primary subUpdate" data-dismiss=""
                            onclick="addPhone(this)">确认
                    </button>
                    <button type="button" class="btn btn-sm btn-info" data-dismiss="modal" onclick="closeValue()">取消
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /.page-content -->

<%@include file="../common/page_content_suf.jsp" %>
<%@include file="../common/script.jsp" %>

<script type="text/javascript" src="${GLOBAL.staticJsPath}/assets/my97/WdatePicker.js"></script>

<script type="text/javascript">
    var followListTable;
    jQuery(function ($) {
        loadList();

        if ($("#tel").val() != '') {
            $("#apply").hide();
            $("#telPhone").show();
        }
    });

    function loadList() {
        followListTable = $('#list-table').dataTable({
            "sAjaxSource": "${GLOBAL.basePath}/phone/asynList?houseId=" + $("#id").val(),
            "fnServerData": function (sSource, aDataSet, fnCallback) {
                $.ajax({
                    "dataType": 'json',
                    "type": "POST",
                    "url": sSource,
                    "data": aDataSet,
                    "success": fnCallback,
                    "beforeSend": function (XMLHttpRequest) {
                        layer.load();
                    },
                    "complete": function (XMLHttpRequest, textStatus) {
                        layer.closeAll('loading');
                    }
                });
            },
            "fnServerParams": function (aoData) {//向服务器传额外的参数
                <c:if test="${not empty aoData}">
                aoData.push(${aoData});
                </c:if>
            },
            "bSort": false,
            "bFilter": false,
            "bServerSide": true,
            "bProcessing": false,
            "bLengthChange": false,
            "bSearching": false,
            "sProcessing": "${GLOBAL.staticImagePath}/loading.gif' />",
            "oLanguage": {
                "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条",
                "sInfoEmpty": "No data"
            },
            "aoColumns": [
                {"mDataProp": "id"},
                {"mDataProp": "updateDate", "sWidth": "230px"},
                {"mDataProp": "name"},
                {"mDataProp": "remark"}
            ]
        });
    }

    function addPhone(obj) {
        var remark = $("#remark").val();
        if (remark != null && remark != "") {
            $.ajax({
                url: "${GLOBAL.basePath}/phone/save",
                type: "post",
                async: false,
                data: {
                    id: $("#id").val(),
                    remark: $("#remark").val()
                },
                success: function (data) {
                    if (data) {
                        obj.setAttribute('data-dismiss', 'modal');
                        window.location = "${GLOBAL.basePath}/phone/list?id=" + $("#id").val();
                    }
                }

            })
        }
    }

    function closeValue() {
        $("#remark").val("");
    }
</script>
